<template>
	<div class="main">
		<div class="title">
			活动管理
		</div>
		<div class="search">
			<div class="input">
				<span>活动名称：</span>
				<el-input v-model="activityName" placeholder="请输入活动名称" maxlength="8" clearable />
			</div>
			<div class="input" style="width: 270px;">
				<span>最低信义分：</span>
				<el-input type="number" v-model="minScore" placeholder="请输入最低信义分" maxlength="8" clearable />
			</div>
			<div class="input" style="width: 270px;">
				<span>最高信义分：</span>
				<el-input type="number" v-model="maxScore" placeholder="请输入最高信义分" maxlength="8" clearable />
			</div>
			
			<div class="input" style="width: 270px;">
				<span>活动类型：</span>
				<el-select v-model="activityType" placeholder="请选择活动类型">
					<el-option label="线上活动" value="线上活动" />
					<el-option label="线下活动" value="线下活动" />
				</el-select>
			</div>
			<div class="input" style="width: 270px;">
				<span>是否推荐：</span>
				<el-select v-model="recommend" placeholder="请选择是否推荐">
					<el-option label="推荐" value="推荐" />
					<el-option label="不推荐" value="不推荐" />
				</el-select>
			</div>
		</div>
		<div class="search">
			<el-button type="primary" @click="activityDetail(null)">新增</el-button>
			<el-button type="primary" @click="searchActivityList">查询</el-button>
			<el-button type="primary" @click="clearSearch">重置</el-button>
		</div>
		<el-table class="custom-table" :data="table.activityList" style="width: 100%">
			<el-table-column label="活动名称" width="150">
				<template #default="scope">
					<span class="ellipsis">{{ scope.row.activityName }}</span>
				</template>
			</el-table-column>
			<el-table-column label="宣传图" width="250">
				<template #default="scope">
					<img :src="imgPath + scope.row.publicityMap"
						style="width: 100px; height: 60px; border-radius: 10px;" />
				</template>
			</el-table-column>
			<el-table-column label="活动简介" width="350">
				<template #default="scope">
					<span class="ellipsis">{{ scope.row.activityInformation }}</span>
				</template>
			</el-table-column>
			<el-table-column label="活动类型" width="150">
				<template #default="scope">
					<span class="ellipsis">{{ scope.row.activityType }}</span>
				</template>
			</el-table-column>
			<el-table-column label="信义分" width="150">
				<template #default="scope">
					<span class="ellipsis">{{ scope.row.score }}</span>
				</template>
			</el-table-column>
			<el-table-column label="申请量" width="150">
				<template #default="scope">
					<span class="ellipsis">{{ scope.row.applicationCount }}</span>
				</template>
			</el-table-column>
			<el-table-column label="是否推荐" width="150">
				<template #default="scope">
					<span class="ellipsis">{{ scope.row.recommend == 'N' ? '不推荐' : '推荐' }}</span>
				</template>
			</el-table-column>
			<el-table-column label="创建时间" width="200">
				<template #default="scope">
					<span class="ellipsis">{{ scope.row.createDate }}</span>
				</template>
			</el-table-column>
			<el-table-column label="操作" width="250">
				<template #default="scope">
					<el-row>
						<el-button :type="scope.row.recommend == 'N' ? 'primary' : 'warning'"
							@click="updateRecommend(scope.row.id)">{{ scope.row.recommend == 'N' ? '推&nbsp&nbsp&nbsp荐' : '不推荐' }}</el-button>
						<el-button type="primary" @click="activityDetail(scope.row.id)">编辑</el-button>
						<el-button type="danger" @click="deleteActivity(scope.row.id)">删除</el-button>
					</el-row>
				</template>
			</el-table-column>
		</el-table>
		<div class="page">
			<el-pagination :current-page="page" :page-size="10" :pager-count="11" layout="prev, pager, next"
				:total="table.total" @current-change="pageChange" />
		</div>
	</div>
</template>

<script>
	import {
		mapActions,
		mapMutations
	} from 'vuex'


	import {
		ElMessage,
		ElMessageBox
	} from 'element-plus'

	export default {
		data() {
			return {
				table: {
					total: 0,
					activityList: []
				},
				imgPath: "http://localhost:8080/images/",
				page: 1,

				activityName: "",
				minScore: "",
				maxScore: "",
				activityType: "",
				recommend: "",
				defaultActivityName: "",
				defaultMinScore: "",
				defaultMaxScore: "",
				defaultActivityType: "",
				defaultRecommend: ""
			}
		},

		methods: {
			//映射
			...mapActions('activity', ['activityList', 'deleteActivityStore', 'updateRecommendStore', 'setActivityId']),

			/**
			 * 查询活动列表
			 */

			async getActivityList() {
				const res = await this.activityList({
					page: this.page,
					activityName: this.defaultActivityName,
					minScore: this.defaultMinScore,
					maxScore: this.defaultMaxScore,
					activityType: this.defaultActivityType,
					recommend: this.defaultRecommend
				})
				if (res.successful) {
					this.table.total = res.data.total
					// 遍历更新状态码为中文描述
					this.table.activityList = res.data.rows
				}
			},

			/**
			 * 页码改变时查询
			 */
			pageChange(newPage) {
				this.page = newPage;
				this.getActivityList(); // 每当页码改变时，重新加载数据
			},

			/**
			 * 清除搜索框
			 */
			clearSearch() {
				this.activityName = ""
				this.minScore = ""
				this.maxScore = ""
				this.activityType = ""
				this.recommend = ""
			},


			/**
			 * 点击查询
			 */
			searchActivityList() {
				this.defaultActivityName = this.activityName
				this.defaultMinScore = this.minScore
				this.defaultMaxScore = this.maxScore
				this.defaultActivityType = this.activityType
				this.defaultRecommend = this.recommend
				this.getActivityList();
			},

			/**
			 * 删除活动
			 */
			deleteActivity(id) {

				ElMessageBox.confirm(
						'是否删除?',
						'Warning', {
							confirmButtonText: '确认',
							cancelButtonText: '取消',
							type: 'warning',
						}
					)
					.then(async () => {
						await this.deleteActivityStore({
							id: id
						})
						await this.getActivityList();
						ElMessage({
							type: 'success',
							message: '删除成功！',
						})
					})
					.catch(() => {})
			},

			/**
			 * 更新是否推荐
			 */
			async updateRecommend(id) {

				await this.updateRecommendStore({
					id: id
				})
				await this.getActivityList();

			},

			/**
			 * 新增/修改活动跳转页面
			 */
			async activityDetail(activityId) {
				if(activityId){
					console.log('=====>List', activityId)
					await this.setActivityId(activityId)
				}
				this.$emit('activity-detail', 'ActivityDetail');
			}
		},

		//在挂载开始之前被调用
		//获取所有服务信息
		async beforeMount() {
			
			let token = window.localStorage.getItem('token')
			if(token){
				this.getActivityList()
			}else{
				//跳转至主页
				this.$router.replace('/')
			}
		}
	}
</script>

<style scoped>
	.main {
		width: 2000px;
		height: 1120px;
		margin-left: 400px;
		margin-top: 50px;
		display: flex;
		flex-direction: column;
	}

	/* 新增的样式类用于处理文本溢出 */
	.ellipsis {
		white-space: nowrap;
		/* 禁止换行 */
		overflow: hidden;
		/* 隐藏超出内容 */
		text-overflow: ellipsis;
		/* 显示省略号 */
		cursor: default;
	}

	.custom-table {
		height: 890px;
	}

	.page {
		margin-top: 10px;
		margin-left: 550px;
	}

	.title {
		color: #666;
		font-size: 15px;
		margin-bottom: 20px;
	}

	.search {
		margin-bottom: 30px;
		display: flex;
		flex-direction: row;
	}

	.input {
		width: 300px;
		display: flex;
		justify-content: center;
		color: #666;
		font-size: 12px;
		margin-right: 50px;
	}

	.input span {
		width: 100px;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.search .el-button {
		margin-right: 20px;
	}
</style>